<template>
    <div>
        <div class="filter-container">
            <el-form label-position="left" :inline="true">
                <!--                <el-form-item label="渠道类型">-->
                <!--                    <select-app-source-type v-model="search.source_type" :multiple="false" :clearable="false"></select-app-source-type>-->
                <!--                </el-form-item>-->
                <el-form-item label="渠道">
                    <select-app-source v-model="search.source" :type="search.source_type" :multiple="true" :clearable="false"></select-app-source>
                </el-form-item>
                <el-form-item label="日期" prop="day">
                    <el-date-picker
                        :clearable="false"
                        v-model="search.day"
                        type="daterange"
                        value-format="yyyy-MM-dd"
                        placeholder="选择日期"
                        style="width: 210px;">
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="">
                    <el-button class="filter-item" icon="el-icon-search" type="primary" :loading="loading" @click="initSearch()">搜索</el-button>
                    <el-button class="filter-item" @click="exportExcel" v-if="$ENABLE_EXPORT">导出本页</el-button>
                </el-form-item>
            </el-form>
        </div>

        <el-col :lg="12" :xl="8">
            <vxe-table
                :loading="loading"
                ref="xTable"
                highlight-hover-row
                style="width: 100%"
                class="text-center"
                show-footer
                :footer-method="footerMethod"
                :max-height="maxHeight">
                <vxe-table-column title="渠道" field="source" formatter="formatAppSourceName" min-width="150" fixed="left" show-overflow/>
                <vxe-table-column title="日期" field="day" width="100" fixed="left" sortable sort-by="day"/>
                <vxe-table-column title="注册人数" field="registerUser" formatter="formatHuman" min-width="80"/>
            </vxe-table>

            <el-pagination
                class="pull-left"
                background
                :current-page.sync="pageNo"
                :page-sizes="pageOptions.pageSizesList"
                :page-size="pageSize"
                :layout="pageOptions.layout"
                :total="totalDataNumber"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange">
            </el-pagination>
        </el-col>

    </div>
</template>

<script>
import VXETable from "vxe-table";

export default {
    data() {
        return {
            search: {
                source: '',
                day: [],
            },
            loading: false,
            selected: [],
            tableData: [],
            pageNo: 1,
            pageSize: 100,
            totalDataNumber: 0,
            pageOptions: this.$store.state.backend.pageOptions,
        }
    },
    computed: {
        maxHeight() {
            return this.$store.state.backend.windowInnerHeight - 240;
        },
    },
    methods: {
        handleSizeChange(val) {
            this.pageNo = 1;
            this.pageSize = parseInt(`${val}`);
            this.handleSearch();
        },
        handleCurrentChange(val) {
            this.pageNo = parseInt(`${val}`);
            this.handleSearch();
        },
        handleSelectionChange(val) {
            this.selected = val;
        },
        handleSearch() {
            this.loading = true;
            let filter = Object.assign({}, this.search, {
                page: this.pageNo,
                pageSize: this.pageSize,
            });
            this.$store.dispatch('spreadData/DailyAgentReg', filter).then(({data}) => {
                this.$refs.xTable.reloadData(data.data);
                this.totalDataNumber = data.meta.total;
            }).finally(() => {
                this.loading = false;
            });
        },
        initData() {
            this.initSearchDate();
            this.handleSearch();
        },
        initSearchDate() {
            this.search.day = [
                moment().format('yyyy-MM-DD'),
                moment().format('yyyy-MM-DD')
            ];
        },
        initSearch() {
            this.pageNo = 1;
            this.handleSearch();
        },
        exportExcel () {
            this.$refs.xTable.exportData({
                filename: '推广数据-' + this.$route.meta.title,
                type: 'xlsx'
            })
        },
        footerMethod({ columns, data }) {
            const sums = [];
            let allFields = {};
            let rmbFields = ['pay1', 'cost', 'payFirst'];
            let scale = 0;
            data.map(v => {
                if (!scale && !isNaN(v.scale)) scale = v.scale;
            });

            columns.forEach((column, index) => {

                allFields[column.property] = index;

                if (column.property === 'source') {
                    sums[index] = '汇总';
                    return;
                }

                if (index < 2) {
                    sums[index] = '-';
                    return ;
                }
                let values = data.map(item => Number(item[column.property]));
                if (!values.every(value => isNaN(value))) {
                    sums[index] = values.reduce((prev, curr) => {
                        const value = Number(curr);
                        if (!isNaN(value)) {
                            return prev + curr;
                        } else {
                            return prev;
                        }
                    }, 0);

                } else {
                    sums[index] = 'N/A';
                }
            });
            sums[allFields.scale] = scale;
            sums[allFields.cost] = sums[allFields.pay1]*scale;
            Object.keys(allFields).map(field => {
                let index = allFields[field];
                if (index < 1 || sums[index] === 'N/A' || isNaN(sums[index])) return;

                const rmbFields = ['pay1', 'cost', 'payFirst'];
                // 转成RMB
                if (rmbFields.includes(field)) {
                    sums[index] = VXETable.formats.get('formatHumanRmb')({
                        cellValue: sums[index]
                    })
                } else if (!['scale'].includes(field)){
                    sums[index] = VXETable.formats.get('formatHuman')({
                        cellValue: sums[index]
                    })
                }
            })

            return [sums];
        },
    },
    created() {
        this.initData();
    }
}
</script>

<style lang="scss" scoped>
#app .el-form-item {
    margin-bottom: 0;
}
</style>

